 <template>
  <div class="common-layout">
    <el-container>
      <el-header style="height: 16vh; margin: 0; padding: 0 0 0 0"
        ><el-image
          alt=""
          :src="item"
          style="height: 16vh; width: 100%; margin-bottom: 30px; padding: 0"
        >
        </el-image
      ></el-header>
      <!-- <el-header><img src="../asstes/youqulogo.jpg" alt=""></el-header> -->
      <el-container>
        <el-aside width="200px" id="div1" style="margin: 0">
          <!-- <el-img  src="assets/youqulogo.jpg"></el-img> -->
          <el-scrollbar height="90vh">
            <el-menu
              class="aside"
              @select="selectFunc"
              active-text-color="#fffd04b"
              router="true"
              style="height: 100vh"
            >
              <el-avatar
                style="margin: 15px"
                :size="100"
                src="@/asstes/user.jpg"
                alt=""
              ></el-avatar>
              <el-menu-item index="/userone">
                <template #title>
                  <span
                    ><el-icon><Menu /></el-icon>系统首页</span
                  >
                </template>
              </el-menu-item>
              <!--  预约实验室-->
              <el-menu-item index="/usermine">
                <template #title>
                  <span
                    ><el-icon><OfficeBuilding /></el-icon>预约实验室</span
                  >
                </template></el-menu-item
              >
              <!--  预约实验室-->
              <el-menu-item index="/userbiology">
                <template #title>
                  <span
                    ><el-icon><Operation /></el-icon>我的预约</span
                  >
                </template>
              </el-menu-item>
              <!--  预约实验室-->
              <el-menu-item index="/personal">
                <template #title>
                  <span
                    ><el-icon><UserFilled /></el-icon>个人中心</span
                  >
                </template>
              </el-menu-item>

              <el-menu-item index="/userabout">
                <template #title>
                  <span
                    ><el-icon><QuestionFilled /></el-icon>联系我们</span
                  >
                </template>
              </el-menu-item>
            </el-menu>
          </el-scrollbar>
        </el-aside>
        <!-- 野蛮渲染 -->
        <el-main style="padding: 0">         
          
          <el-scrollbar height="90vh">
            <router-view></router-view>
          </el-scrollbar>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
      <script>
export default {
  name: "userhome",
  data() {
    return {
      item: [require("@/assets/shixunlogo.jpg")],
    };
  },
};
</script>
      <style  scoped>
.aside {
  background-color: rgb(94, 99, 116);
}
#title {
  background-color: #1787fb;
}
span {
  color: #fff;
}

.el-menu-item:active {
  background-color: rgb(87, 105, 202);
}
/* //设置选中el-menu-item时的样式 */
.el-menu-item.is-active {
  background-color: #f2f2f544 !important;
  color: #fff;
}
.image {
  width: 100%;
}
</style>
      
      